<template>
    <div class="bg-img">
        <el-row :gutter="10">
         <el-col :span="15" :offset="4" class="mt-20">
             <el-col :span="12" class="mr-0px pr-0px">
                 <el-card class="h-450px" style="background-color: #eff2f7;display: flex;justify-content: center;align-items: center;">
                     <img src="./static/images/login.jpg" />
                 </el-card>
             </el-col>
             <el-col :span="12" class="ml-0px pl-0px">
                 <el-card class="h-450px">
                     <div slot="header" style="text-align:left">
                         <h4 style="margin-bottom: 10px">登陆</h4>
                         <p class="mt-4px mb-4px">欢迎回来，请登录</p>
                     </div>
                     <el-form style="width: 90%; margin: 0 auto" label-position=top label-width="80px" :model="loginForm" >
                         <el-form-item>
                             <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="账号"></el-input>
                         </el-form-item>
                         <el-form-item>
                             <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="密码" type="password"></el-input>
                         </el-form-item>
                         <el-form-item>
                             <el-col :span="18" class="pl-0px">
                                 <el-input v-model="loginForm.imageCode" prefix-icon="el-icon-picture-outline-round" placeholder="验证码" style=""> </el-input>
                             </el-col>
                             <el-col :span="4" :offset="1">
                                 <img src="/pangu/code/image" />
                             </el-col>
                         </el-form-item>
                         <el-form-item >
                             <div style="width: 100%;display: flex; justify-content: space-around; flex-direction: row; flex-wrap: nowrap">
                                 <el-button type="primary" disabled>注册</el-button>
                                 <el-button type="primary" @click="login()" >登录</el-button>
                             </div>
                         </el-form-item>
                     </el-form>
                 </el-card>
             </el-col>
         </el-col>
        </el-row>
    </div>

</template>

<script>
    import Global from "./Global";
    export default {
        name: "login",
        data() {
            return {
                loginForm: {
                    username: '',
                    password: '',
                    imageCode: ''
                }
            }
        },
        methods: {
            login() {
                this.$http({
                    url: '/authentication/form',
                    method: 'POST',
                    data: this.$qs.stringify(this.loginForm)
                }).then((res) => {
                    //存用户token
                     sessionStorage.setItem('userId',res.userId);
                    // 得到权限菜单
                    let permissionsrouters = res.routers;
                    // 格式化权限菜单，将component中的string 转为 component对象
                    // 将路由列表添加到全局
                    Global.routerList = permissionsrouters[0].children;
                    //循环遍历动态路由表的每一个路由
                    Global.generateRouterDate(permissionsrouters);
                    // 动态添加路由;
                    this.$router.addRoutes(permissionsrouters);
                    //跳转到应用界面
                    this.$router.push('/main')
                })
            },
        }
    }
</script>

<style lang="stylus" scoped>
    .bg-img
        background-image: url("./static/images/login-bg.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%
    .items-center
        align-items: center !important
        -webkit-box-align: center !important
    .vx-row
        display flex
        flex-wrap wrap
    .mt-20
        margin-top 8%
    .mt-4px
        margin-top 4px
    .mb-4px
        margin-bottom 4px !important
    .ml-0px
        margin-left 0px !important
    .mr-0px
        margin-right 0px !important
    .p-0px
        padding-left 0px
    .pl-0px
        padding-left 0px !important
    .pr-0px
        padding-right 0px !important
    .h-450px
        height 450px

</style>